<template>
  <div>
     <div class="product-center">
       <el-form ref="dataForm" :rules="producRules" label-width="100px">
  <el-form-item label="产品名称" prop="name">
    <el-input v-model="dataForm.name" placeholder="请输入产品名称"></el-input>
  </el-form-item>
  <el-form-item label="产品编号" prop="productNo">
    <el-col >
    <el-input v-model="dataForm.productNo" placeholder="请输入产品编号"></el-input>
    </el-col>
  </el-form-item>
  <el-form-item label="产品单价(¥)" prop="price">
    <el-col >
    <el-input v-model="dataForm.price" placeholder="请输入产品单价"></el-input>
    </el-col>
  </el-form-item>
  <el-form-item label="分类" prop="categray">
    <el-select v-model="dataForm.categray" placeholder="请选择分类">
      <el-option label="区域一" value="螺丝"></el-option>
      <el-option label="区域二" value="螺母"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="单位" prop="unit">
    <el-select v-model="dataForm.unit" placeholder="请选择单位">
      <el-option label="个" value="个"></el-option>
      <el-option label="箱" value="箱"></el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="产品净重(g)" prop="weight">
    <el-col >
    <el-input v-model="dataForm.weight" placeholder="请输入产品"></el-input>
    </el-col>
  </el-form-item>
<el-form-item label="毛坯" prop="slug">
    <el-select v-model="dataForm.slug" placeholder="请选择毛坯类型">
      <el-option label="铜管" value="tong"></el-option>
      <el-option label="铁管" value="tie"></el-option>
    </el-select>
  </el-form-item>
<el-form-item label="库存" >
    <el-col >
    <el-input v-model="dataForm.stock" placeholder="请输入库存数量"></el-input>
    </el-col>
  </el-form-item>
<el-form-item label="仓库">
    <el-col >
 <el-select v-model="dataForm.warehouse" placeholder="请选择仓库">
      <el-option label="仓库1" value="仓库1"></el-option>
      <el-option label="仓库2" value="仓库2"></el-option>
    </el-select>
      </el-col>
  </el-form-item>
  <el-form-item label="客户" prop="customer">
    <el-col >
 <el-select v-model="dataForm.customer" placeholder="请选择客户">
      <el-option label="上海" value="shanghai"></el-option>
      <el-option label="北京" value="beijing"></el-option>
    </el-select>
      </el-col>
  </el-form-item>
  <el-form-item label="备注">
    <el-input type="textarea" v-model="dataForm.remark"></el-input>
  </el-form-item>
  <el-form-item label="图纸" v-model="dataForm.drawList">

    <div v-for="(item, index) in dataForm.drawList" :key="index" class="buttons-content">
      <el-upload
  action="#"
  list-type="picture-card"
  :auto-upload="false">
    <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{file}">
      <img
        class="el-upload-list__item-thumbnail"
        :src="item" alt=""
      >
      <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(item)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(item)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(item)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
</el-upload>
    </div>
  </el-form-item>
  <el-form-item label="样品">

    <el-upload
  action="http://localhost/erp/index.php/upload"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :on-success="handleSuccess"
  >
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit('form')" style="width:200px;">新增产品</el-button>
  </el-form-item>
</el-form>

 </div>
  </div>
</template>

<script>
  import {eupdateProduct} from '@/api/product';
export default {
  inject:['reload'],
  data(){
    return {
        
        producRules: {
    				name: [
						{ required: true, message: '请输入产品名称', trigger: 'blur' },
					],
          productNo: [
						{ required: true, message: '请输入产品编号', trigger: 'blur' },
					],
           categray: [
						{ required: true, message: '请选择产品分类', trigger: 'blur' },
					],
           unit: [
						{ required: true, message: '请选择产品单位', trigger: 'blur' },
					],
          weight: [
						{ required: true, message: '请选择产品单个重量', trigger: 'blur' },
					],
          slug :[
          	{ required: true, message: '请选择产品使用毛坯', trigger: 'blur' },

          ],
          customer:[
          	{ required: true, message: '请选择客户', trigger: 'blur' },
          ]
    			},
        dialogVisible: false,
        dialogImageUrl: '',
      }
  },
  props:{
    dataForm:{},
    
  },
  components:{

  },
  methods:{
  onSubmit(tform) {
    				this.$refs[tform].validate(async (valid) => {
              if(valid){
               this.eupdateProducts();
              }else {
						this.$notify.error({
							title: '错误',
							message: '请检查输入是否正确',
							offset: 100
						});
						return false;
					}
            });
      },
      async eupdateProducts(){
				 try{
           let params = this.form;
           params.drawingPic = this.form.drawingPicArr.join(',');
           params.samplePic = this.form.samplePicArr.join(',');

              const result = await eupdateProduct(params);
                    if (result.code == 200) {
                        this.$message('新增产品成功');
                        this.reload()
                    }else{
                        throw new Error('获取数据失败');
                    }
                }catch(err){
                    console.log('获取数据失败', err);
                }
			},
      handleSuccess(data){
        let url = 'http://localhost/erp/upload/' + data.data.file;
        this.form.samplePicArr.push(url);

      },
      handleDrawSuccess(data){
        let url = 'http://localhost/erp/upload/' + data.data.file;
        this.form.drawingPicArr.push(url);
      },
      handleRemove(file){
       let url = 'http://localhost/erp/upload/' + file.response.data.file;
      let index = this.form.samplePicArr.indexOf(url);
      this.form.samplePicArr.splice(index,1);
        console.log(url);
      },
      handleDrawRemove(file){
      let url = 'http://localhost/erp/upload/' + file.response.data.file;
      let index = this.form.drawingPicArr.indexOf(url);
      this.form.drawingPicArr.splice(index,1);
        console.log(url);
      },
      handleDrawPictureCardPreview(){
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handlePictureCardPreview(file) {
        this.dialogVisible = true;
      }

  }
}
</script>

<style lang="less">
  .product-center {

    width: 100%;
    border-radius: 8px;
    .el-form .el-form-item .el-input {
      width: 200px;
    }
    }
</style>